<template>
  <el-dialog title="指标详情" :visible.sync="dialogVisible" width="600px">
    <div class="dialog">
      <el-form>
        <el-form-item label="指标名称：">
          <span>{{ targetDetail.name }}</span>
        </el-form-item>
        <el-form-item label="考核部门:">
          <span>{{ targetDetail.checkDeptName }}</span>
        </el-form-item>
        <el-form-item label="考核主题:">
          <span>{{ targetDetail.checkTopic }}</span>
        </el-form-item>
        <el-form-item label="数据系统:">
          <span>{{ targetDetail.dataSystemName }}</span>
        </el-form-item>
        <el-form-item label="接口类型:">
          <span> {{ targetDetail.apiType ===1 ? '接口方式': '' }}</span>
        </el-form-item>

        <el-form-item label="指标描述:">
          <span>{{ targetDetail.apiDesc }}</span>
        </el-form-item>
        <el-form-item label="适用图表:" class="fiximg">
          <img src="../../../assets/exploitation/linebright.png" alt="">
          <img src="../../../assets/exploitation/barbright.png" alt="">
          <img src="../../../assets/exploitation/piebright.png" alt="">
          <img src="../../../assets/exploitation/scatterbright.png" alt="">
        </el-form-item>
        <el-form-item label="指标责任人:" class="targetpeople">
          <span>
            <el-input
              placeholder="各中心/区域/项目管理员(默认)"
              :disabled="true"
              style="width:400px"
            />
          </span>
          <!-- placeholder="{{targetDetail.responsibleAccountNames	}}" -->
        </el-form-item>
        <el-form-item label="更多责任人：" class="morePerson">
          <StaffTemplate
            style="width:300px"
            :value="accountList"
            :type="[1]"
            title="选择人员"
            @change="handleTreeSubmit"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button
        type="primary"
        @click="
          () => {
            handleTargetPerview(id)
          }
        "
      >
        预览
      </el-button>
      <el-button type="transparent" @click="dialogVisible = false">
        关闭
      </el-button>
    </div>
    <template v-if="pictureVisible">
      <el-dialog
        title="预览图"
        :visible="pictureVisible"
        append-to-body
        :before-close="() => (pictureVisible = false)"
      >
        <section class="section-body">
          <info-line
            id="timeLine"
            :x-data="infoLineXData"
            :data="infoLineData"
            :loading="timeLoading"
            :opt-renderer="'canvas'"
            :option="timeLineOption"
          />
        </section>
      </el-dialog>
    </template>
  </el-dialog>
</template>

<script>
import {
  fetchKpiDepartGet,
  fetchUpdateResponsibleAccount,
  fetchGetChartPreviewList
} from '@/api/indicatorlib/configuration'
import InfoLine from '@/components/Echarts/InfoLine'
import StaffTemplate from '@/containers/StaffTemplate/index'
export default {
  name: 'TargetDetail',
  components: { StaffTemplate, InfoLine },
  data() {
    return {
      pictureVisible: '',
      timeLineOption: {},
      infoLineData: [],
      infoLineXData: [],
      deptId: '',
      kpiName: '',
      targetId: '',
      accountList: [],
      dialogVisible: false,
      targetDetail: {}
    }
  },
  methods: {
    open(id) {
      this.$data.dialogVisible = true
      this.postDetail(id)
      this.targetId = id
    },
    // 获取详情
    postDetail(id) {
      fetchKpiDepartGet({ id }).then(res => {
        this.$data.deptId = res.deptId
        this.$data.kpiName = res.name
        this.$data.targetDetail = res
        this.$data.accountList = (res.responsibleAccountIds || '')
          .split(',')
          .map(e => {
            return {
              notifyTargetType: 1,
              notifyTargetId: e
            }
          })
      })
    },
    // 预览
    handleTargetPerview() {
      fetchGetChartPreviewList({
        deptId: this.$data.deptId,
        kpiName: this.$data.kpiName
      }).then(res => {
        const infoLineXData = []
        const infoLineData = []
        res.forEach(item => {
          const { kpiDate, kpiValue } = item
          infoLineXData.push(kpiDate)
          infoLineData.push(kpiValue)
        })
        this.infoLineXData = infoLineXData
        this.infoLineData = infoLineData
        this.pictureVisible = true
      })
    },
    handleTreeSubmit(res, data) {
      const accountIds = data.orgList.map(e => e.id).join(',')
      const accountNames = data.orgList.map(e => e.name).join(',')
      const id = Number(this.$data.targetId)
      const params = { accountIds, accountNames, id }
      this.postsaveMorePersonList(params)
    },
    // 更多责任人保存
    postsaveMorePersonList(params) {
      fetchUpdateResponsibleAccount(params).then(res => {
        console.log('zn')
        this.$message.success('保存成功')
      })
    }
  }
}
</script>

<style lang="scss" scope>
ul {
  list-style: none;
}
.dialog {
  color: gray;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // padding-left: 10px;
  .el-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 46%;
    }
    .fiximg {
      width: 100%;
      height: 50px;
      display: flex;
    }
    .morePerson {
      width: 100%;
    }
  }
  .morePerson {
    width: 100%;
  }
  div {
    // width: 50%;
    display: flex;
    align-items: center;
    line-height: 50px;
    img {
      height: 50px;
      width: 50px;
      line-height: 50px;
      margin: 0 20px;
    }
  }

  .targetpeople {
    width: 100% !important;
    i {
      margin-left: 10px;
    }
  }
}
.footer {
  text-align: center;
}
</style>
